<template>
  <div class="integral">
    <div class="integral_title">
      <div class="classifications">添加会员等级</div>
    </div>
    <div class="box">
      <el-table
        :data="tableData"
        style="width: 100%; border-radius: 10px"
        ref="dataTable"
        :header-cell-style="{
          color: '#3D3D3D',
          'font-size': '22px',
          height: '70px',
          'font-weight': '400',
          'background-color': '#F8F9FB',
          'border-bottom': 'none',
        }"
        :row-class-name="tableRowClassName"
      >
        <el-table-column label="会员图标" align="center" width="150">
          <template slot-scope="scope">
            <el-upload
              action="你自己的上传路径"
              list-type="picture-card"
              :on-remove="handleRemove"
              :http-request="
                (file) => {
                  return onUploadSuccessImggrey(file, scope.row);
                }
              "
              :file-list="scope.row.giftDarkImgFileList"
              ref="img-Imggrey"
              :limit="1"
            >
              <i class="el-icon-plus"></i>
            </el-upload>
          </template>
        </el-table-column>
        <el-table-column
          prop="name"
          label="会员等级"
          align="center"
        >
          <template slot-scope="scope">
            <el-input size="mini" v-model="scope.row.garde" class="input"/>
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作"  width="200">
          <template slot-scope="scope">
            <button @click="launch(scope.$index, scope.row)">编辑</button>&nbsp;&nbsp;&nbsp;
            <button @click="launch(scope.$index, scope.row)">删除</button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="preser">保存</div>
  </div>
</template>
<script>
import { constants } from "crypto";
export default {
  data() {
    return {
      form: {
        imgList: [
          { picUrl: "", values: "" },
          { picUrl: "", values: "" },
          { picUrl: "", values: "" },
        ],
      },
    };
  },
  methods: {
    //隔行换色
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2 === 1) {
        return "warning-row";
      } else {
        return "success-row";
      }
    },
  },
};
</script>

<style scoped>
.integral {
  border-radius: 5px;
  background-color: #fff;
  overflow: hidden;
  height: 80vh;
  padding: 0 30px;
}
.integral /deep/ .el-table .warning-row {
  background: #f8f9fb !important;
}
.integral /deep/ .el-table .success-row {
  background: white !important;
}
.integral_title {
  font-size: 16px;
}
.box {
  width: 100%;
  border-radius: 10px;
}
.box table {
  display: flex;
  justify-content: space-between;
  height: 55px;
  line-height: 55px;
  background: #f5f5f5;
  border-radius: 10px 10px 0 0;
  color: #5B5B5B;
  font-size: 15px;
}
.box table th {
  width: 32%;
  text-align: center;
  font-weight: normal;
}
.disp{
  display: flex;justify-content: space-between;
  align-items: center;
  padding: 10px 0;
}
.disp div{
  width: 32%;
  text-align: center;
  margin: 0 auto;
}
.disp .inputs input{
  width: 50%;
  border: 1px solid #D2D2D2;
  border-radius: 3px;
  height: 20px;
  outline: none;
  color: #5B5B5B;
}
.disp .dels{
  color: #2689FF;
  font-size: 15px;
}
.disp .dels:hover{
  font-weight: bold;
  cursor: pointer;
}
.add {
  width: 80px;
  height: 35px;
  line-height: 35px;
  border: 1px solid#2689FF;
  text-align: center;
  border-radius: 3px;
  color: #2689ff;
  font-size: 14px;
  margin-top: 10px;
  cursor: pointer;
}
/* 上传图片 */
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
/deep/ .el-upload--picture-card {
  width: 55px !important;
  height: 55px;
  line-height: 55px;
}

.el-upload--picture-card i {
  font-size: 16px !important;
}
/deep/ .el-upload-list--picture-card .el-upload-list__item {
  width: 55px;
  height: 55px;
  line-height: 55px;
}
.el-input {
  width: 8%;
}
/deep/ .el-table td.el-table__cell,
.el-table th.el-table__cell.is-leaf {
  background-color: #fff;
}
.classifications{
  border: 1px solid #6584f4;
  margin:20px 0;
  width: 120px;
  height: 38px;
  line-height: 38px;
  text-align: center;
  font-size: 0.875rem;
  color: #fff;
  background-color: #436af2;
  border-radius: 5px;
  margin-right: 10px;
}
.preser{
  border-radius: 5px;
  color: #fff;
  width: 80px;
  font-size: 0.875rem;
  height: 35px;
  margin-top:30px;
  line-height: 35px;
  text-align: center;
  background-color: #436af2;
}
</style>